<%@ page contentType="text/html;charset=UTF-8" %>
    <script src="${ctxStatic}/IDH/js/rem.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="${ctxStatic}/IDH/css/reset.min.css" />
    <link rel="stylesheet" type="text/css" href="${ctxStatic}/bootstrap=v3.3.0/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="${ctxStatic}/bootstrapValidator/dist/css/bootstrapValidator.min.css"/>
    <link rel="stylesheet" type="text/css" href="${ctxStatic}/toastr/toastr.min.css" />
    <link rel="stylesheet" type="text/css" href="${ctxStatic}/iconfont/iconfont.css">
    <link rel="stylesheet" type="text/css" href="${ctxStatic}/IDH/css/head/head.css">
    <link rel="stylesheet" type="text/css" href="${ctxStatic}/layer-v3.0.1/layer/skin/default/layer.css"/>
    
    <script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" data-appid="101370661" data-redirecturi="http://gainseng.com/jeesite/f/qqLogin" charset="utf-8"></script>
    <script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
		
    <!-- pc head start -->
    <header class="pc_dom hidden-xs">
    	<input type="hidden" id="loginUserId" value="${user.id}"/>
		<div class="header container" style="padding-left:0;padding-right:0;">
			<div class="col-xs-12">
				<div class="row row_center">
					<div class="col-xs-3 header_logo" style="margin-left:10px;">
						<a href="#">
							<img style="width:100%;height:100%;" src="${ctxStatic}/IDH/images/JS MALL LOGO-01-01.png" />
						</a>
					</div>
					<div class="col-xs-4 header_nav">
						<ul class="hn_ul">
							<li>
								<a href="${ctxf}">公司首页</a>
							</li>
							<li  class="tabLi">
								<a href="${ctxf}/front/index">商城首页</a>
							</li>
							<li>
								<a href="${ctxf}/front/product/genProduct/developmentBoard">开发板</a>
							</li>
							<li>
								<a href="${ctxf}/front/product/genProduct/parts">配件</a>
							</li>
							<li>
								<a onclick="gotoJSLT()" style="cursor:pointer;">霁圣论坛</a>
							</li>
						</ul>
					</div>
					<div class="col-xs-5 header_help">
						<div class="help_top clearfix">
							<ul class="hp_ul">
								<li>
									<a href="${ctxf}/list-1588f167d2e3428a82e73d683b81b182.html">帮助</a>
								</li>
								<li>
									<c:if test="${count != null}">
										<ul class="pc-nav" id="pc-nav">
									        <li>
									        	<a href="#"><span id="username">${user.username}</span> <span class="caret"></span></a>
									            <ul class="pc-subnav">
									                <li><a href="${ctxf}/userfront/myAccount.html" >我的账户</a></li>
									                <li><a href="${ctxf}/userfront/toOrder" >我的订单</a></li>
									                <li><a href="${ctxf}/userfront/toAddress2">收货管理</a></li>
									                <li><a href="${ctxf}/logout" onclick="loginOut()">退出</a></li>
									            </ul>
									        </li>
									    </ul>
                               		</c:if>
									<c:if test="${count == null}">
										<a href="${ctxf}/account/login.html" onclick="login()">登录</a>
									</c:if>
								</li>
							</ul>
						</div>
						<div class="row help_bottom">
							<div class="col-xs-12">
								<div class="shopCar " onclick="clickShopCar();">
									<div class="btn btn-default btnCar">
										<a href="#"><i class="iconfont icon-gouwuche"></i>购物车</a>
									</div>
									
									<c:if test="${not empty count && count != 0}">
										<div class="carNumber " id="countDiv">${count }</div>
                              			</c:if>
                              			<c:if test="${ empty count || count == 0}">
										<div class="carNumber hide" id="countDiv">${count }</div>
                              			</c:if>
								</div>
								<div class="search row">
									<div class="v_search" id="search">
										<form id="searchForm" action="${ctxf}/front/product/genProduct/all" method="post">
											<input type="hidden" id="pageNo" name="pageNo" value="" />
											<div class="in_con">
												<i class="icon iconfont icon-sousuo"></i>
												<input type="text" id="name" name="name" value="" class="search_input ui-autocomplete-input" placeholder="" style="color:grey;" autocomplete="off" />
												<input class="search_b" id="search_b" type="button" onclick="changeAction()" value="搜&nbsp;索">
											</div>
										</form>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</header>
	<!--pc head end-->

	<!--phone head start-->
	<header class="phone_dom visible-xs-block">
		<div class="p_head">
			<div class="p_logo">
				<a href="#">
					<img src="${ctxStatic}/IDH/images/JS MALL LOGO-01-01.png" />
				</a>
			</div>
			<div class="p_help">
				<ul class="p_hp_ul clearfix">
					<li>
						<a href="${ctxf}/list-1588f167d2e3428a82e73d683b81b182.html">帮助</a>
					</li>
					<li>
						<c:if test="${count != null}">
                           <ul class="phone-nav" id="phone-nav">
						        <li>
						        	<a href="#"><span class="max-width-60" title="${user.username }">${user.username }</span> <span class="caret"></span></a>
						            <ul class="phone-subnav">
						                <li><a href="${ctxf}/userfront/myAccount.html" >我的账户</a></li>
						                <li><a href="${ctxf}/userfront/toOrder" >我的订单</a></li>
						                <li><a href="${ctxf}/userfront/toAddress2">收货管理</a></li>
						                <li><a href="${ctxf}/logout">退出</a></li>
						            </ul>
						        </li>
						    </ul>
                       </c:if>
                           		
						<c:if test="${count == null}">
							<a href="${ctxf}/account/login.html">登录</a>
						</c:if>
					</li>
				</ul>
			</div>
		</div>
		<div class="p_nav">
			<ul class="p_ul">
				<li>
					<a href="${ctxf}">公司首页</a>
				</li>
				<li class="p_ul_li_active">
					<a href="${ctxf}/front/index">商城首页</a>
				</li>
				<li>
					<a href="${ctxf}/front/product/genProduct/developmentBoard">开发板</a>
				</li>
				<li>
					<a href="${ctxf}/front/product/genProduct/parts">配件</a>
				</li>
				<li>
					<a href="${ctxf}/front/product/genProduct/searchPro" id="phone-search"><i class="iconfont icon-sousuo"></i></a>
					<a href="#" onclick="clickShopCar();"><i class="iconfont icon-gouwuche"></i>
	           			<c:if test="${not empty count && count != 0}">
							<div class="carNumberPhone " id="countDivPhone">${count }</div>
                        </c:if>
                        <c:if test="${ empty count || count == 0}">
							<div class="carNumberPhone hide" id="countDivPhone">${count }</div>
                        </c:if>
					</a>
				</li>
			</ul>
		</div>
	</header>
	<!--phone head end-->
	
	<!--模态框 开始-->
		<div class="modal fade  bs-example-modal-md" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModal" aria-hidden="true">
			<div class="modal-dialog  bs-example-modal-md">
				<div class="modal-content">
					<div class="modal-header">
						<h4 class="modal-title">登录</h4>
					</div>
					<div class="modal-body clearfix">
						<form class="form-horizontal" action="${ctxf}/account/doLogin" method="post" id="moadlLoginForm">
							<input type="hidden"  id="isAdd" placeholder="是否加入购物车操作" value="false"/>
							<div class="col-lg-12">
								<div class="row">
									<div class="col-lg-12 center">
										<div class="form-group">
											<label class="col-lg-3 control-label">用户名</label>
											<div class="col-lg-8">
												<input type="text" class="form-control" id="username" name="username"  placeholder="请输入用户名" />
											</div>
										</div>
									</div>
									<div class="col-lg-12 center">
										<div class="form-group">
											<label class="col-lg-3 control-label">密码</label>
											<div class="col-lg-8">
												<input type="password" class="form-control" id="passWord" name="passWord" placeholder="请输入密码" autocomplete="off"/>
											</div>
										</div>
									</div>
									<div class="col-lg-10 center">
										<div class="form-group text-right">
											<a href="${ctxf}/account/register.html">注册 </a>  | <a href="${ctxf}/account/forgetPassword" class="a_margin">忘记密码</a>
										</div>
									</div>
									<div class="col-lg-10 center">
										<div class="form-group">
											<div class="col-lg-5 col-xs-5">
												<button type="submit" class="btn btn-primary btn-option-primary col-lg-12 col-xs-12" id="moalLogin" onclick="doLogin();">登录</button>
											</div>
											<div class="col-lg-5 col-xs-5 pull-right">
												<button type="button" class="btn btn-default btn-option-default col-lg-12 col-xs-12" onclick="$('#isAdd').val('false')" data-dismiss="modal">取消</button>
											</div>
										</div>
									</div>
									<div class="col-lg-10 center">
										<div class="form-group">
											<div class="Third_party_login">
												<div class="line"></div> 
												<div class="text">第三方登录</div> 
												<div class="line"></div>
											</div>
										</div>
									</div>
									<div class="col-lg-10 center">
										<div class="form-group">
											<div class="Third_party_login_logo clearfix">
											  <a class="pull-left hidden-xs" href="${ctxf}/weixinForLogin">
											 	<img src="${ctxStatic}/IDH/images/login/weixin.png"/>
											  </a>
											  <a class="pull-right hidden-xs" href="${ctxf}/forQQLogin">
											    <img src="${ctxStatic}/IDH/images/login/QQ.png"/>
											  </a>
											  <a class="visible-xs-block m-c" href="${ctxf}/forQQLogin">
											    <img src="${ctxStatic}/IDH/images/login/QQ.png"/>
											  </a>
											</div>
										</div>
									</div>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
		<!--模态框 结束-->
	<script src="${ctxStatic}/jquery/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="${ctxStatic}/bootstrap=v3.3.0/dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="${ctxStatic}/toastr/toastr.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="${ctxStatic}/bootstrapValidator/dist/js/bootstrapValidator.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="${ctxStatic}/layer-v3.0.1/layer/layer.js"></script>
    
	<script type="text/javascript">
		var loginOut = true;     //默认没有登陆 ;为了解决多次点击回车多次登陆
		$(document).ready(function() {
			
			$('#loginModal').modal({
				backdrop: 'static',
				keyboard: false,
				show: false
			});
			
			//导航高亮
			navActive()     
			
			//鼠标点击向下箭头
	        $('.phone-nav li').click(function() {
	        	event.stopPropagation();
	            $(this).parent().find('.phone-subnav').slideToggle('fast');
	           
	        });
			
			$(document).click(function(){
				if($('.phone-subnav').css('display') == "block"){
					$('.phone-subnav').slideUp('fast')
				}
			})
			
	        $('#moadlLoginForm').bootstrapValidator({  
				 message: 'This value is not valid',
			        feedbackIcons: {
			            valid: '',
			            invalid: '',
			            validating: ''
			        },
			        fields: {
				        'username': {
			                validators: {
			                    notEmpty: {
			                        message: '请输入用户名'
			                    },
			                    callback: {
									message: '用户名不存在',
									callback: function(value, validator) {
									return userName;
									}
								}
			                }
			            },
			            'passWord': {
			                validators: {
			                	notEmpty: {
			                        message: '请输入密码'
			                    },
			                   callback: {
									message: '密码错误请重试',
									callback: function(value, validator) {
									return passWord;
									}
								}
			                }
			            },
			        }
			}).on('success.form.bv', function (e) {
				e.preventDefault();
				
			});
		})
		
		//登录input change 事件
		$('#loginModal input').change(function(){
			if($(this).attr('name') == "username"){
				userName = true;
				$('#moadlLoginForm').data('bootstrapValidator').updateStatus('username','NOT_VALIDATED',null).validateField('username');
			}else {
				passWord = true;
				$('#moadlLoginForm').data('bootstrapValidator').updateStatus('passWord','NOT_VALIDATED',null).validateField('passWord');
			}
		})
		
		
		
		//pc按钮回车事件
	    $(document).keydown(function(event){
	    	var e = event || window.event || arguments.callee.caller.arguments[0];
	    	if (e && e.keyCode == 13) { // enter 键
	    		if(document.activeElement.id == "name"){
	    			$("#search_b").click();
	    		}else if($("#loginModal").hasClass('in')){
	    			e.preventDefault();
	    			if(loginOut){
	    				loginOut = false;
	    				$("#moalLogin").click();
	    			}
	    		}else{
	    			return false;
	    		}
	    	}	
	    });
		
		//pc 端搜索
		function changeAction(){
			$("#searchForm").attr("action","${ctxf}/front/product/genProduct/all");
			$("#searchForm").submit();
		}
		
		
		function doLogin() {
			$.ajax({
				type: "POST",
				url: "${ctxf}/account/doLogin",
				dataType: "json",
				data: $('#moadlLoginForm').serialize(),
				async: true,
				success: function(data) {
					if(data.loginResult == "200"){
						toastr.success("登录成功！" , {timeOut:500});
						$('#loginModal').modal("hide");
						var stock = $("#stock").val();
						$.ajax({
							type:"POST",
							data:{id:$("#productIdHidden").val()},
							async: false,
							url: "${ctxf}/front/product/genProduct/getStockByProductId",
							dataType:"json",
							success:function(msg){
								stock = msg.stock;
							},
							error:function() {
							}
						});
						 if($('#isAdd').val() == 'true'){
							if (parseInt(stock) >= parseInt($(".num-input").val())) {
								$("#buyAmt").val($(".num-input").val());
								$("#inputForm").submit();
								
								setTimeout(function(){
									window.location.href = "${ctxf}/front/cart/genCart";
								},1000);
							}else {
								layer.open({title: '提示', content:"库存不足", icon: 0});
								layer.confirm('库存不足', {
									icon: 0,
									title: '提示',
									btn: ['确定'] //按钮
								}, function() {
									/*layer.msg('的确很重要', {
										icon: 1
									});*/
									window.location.reload()
								}, function() {
									/*layer.msg('也可以这样', {
										time: 20000, //20s后自动关闭
										btn: ['明白了', '知道了']
									});*/
								});
							}
						}else {
							window.location.href = "${ctxf}/front/cart/genCart";
						}
					}else if(data.loginResult == "201"){
						userName = false;
						$('#moadlLoginForm').data('bootstrapValidator').updateStatus('username','NOT_VALIDATED',null).validateField('username');
					}else if(data.loginResult == "202"){
						passWord = false;
						$('#moadlLoginForm').data('bootstrapValidator').updateStatus('passWord','NOT_VALIDATED',null).validateField('passWord');
					}else if(data.loginResult == "204"){
						toastr.error("此账户已被禁用",{timeOut: 1000});
					}
				}
			});
		}

		
		//导航高亮
		function navActive(){
			var active = $('#navActive').val()
			$('.p_ul li').eq(active).addClass('p_ul_li_active').siblings().removeClass('p_ul_li_active');
			$('.hn_ul li').eq(active).addClass('tabLi').siblings().removeClass('tabLi');
			if(active == 4){
				$('.hn_ul li').siblings().removeClass('tabLi');

			}
		};
		
		$('.login').click(function() {
			$('#loginModal').modal("show");
		})
		
		/* 查看购物车 */
		function clickShopCar() {
			if ("" == $("#loginUserId").val()) {
				$('#loginModal').modal("show");
			}else{
				window.location.href = "${ctxf}/front/cart/genCart";
			}
		}
		
		/* 时间转换 */
		function getNowDate(date) {
			var d = new Date(date);
			var year = d.getFullYear();
			var month = d.getMonth() + 1;
			var day = d.getDate();
			var hour = d.getHours();
			var minute = d.getMinutes();
			var second = d.getSeconds();
			var f = year + "-" + formate(month) + "-" + formate(day) + " " + formate(hour) + ":" + formate(minute) + ":" + formate(second);
			return f;
		}

		function formate(d) {
			return d > 9 ? d : '0' + d;
		}
		

		function gotoJSLT() {
			sessionStorage.setItem("jsluntan",true);
			var data = new Object;
			data.index = 4;
			var str = JSON.stringify(data);
			sessionStorage.setItem("key",str);
			var username = document.getElementById("username").innerText;
			if(username != null && username != "" && username != "undefined") {
				window.open("https://www.gainseng.com/jsluntan/otherLogin/"+username, "_blank");
			} else {
				window.open("https://www.gainseng.com/jsluntan/", "_blank");
			}
		}
		
		function loginOut(){
			var data = new Object;
			data.index = 1;
			var str = JSON.stringify(data);
			sessionStorage.setItem("key",str);
			sessionStorage.setItem("jsluntan",false);
		}
		
		function login(){
			sessionStorage.setItem("jsluntan",false);
		}
	</script>
<!--phone head end-->